<script setup lang="ts">
import { ref } from 'vue'
import { chatMessageAPI } from '@/http/chatAPI'
import { generateUUID } from '@/utils/uuid'

const message = ref('')
type ChatMessage = {
  role: 'user' | 'assistant'
  id: string
  message: string
}
const chatMessages = ref<ChatMessage[]>([])

const sendMessageClick = () => {
  if (message.value.trim() === '') {
    return
  }

  chatMessages.value.push({
    id: generateUUID(),
    message: message.value,
    role: 'user',
  })

  chatMessageAPI('openai', 'gpt-4', message.value).then((res: any) => {
    console.log(res)
    chatMessages.value.push(res)
    message.value = ''
  })
}
</script>
<template>
  <div class="h-full flex flex-col">
    <div class="top flex-1 flex flex-col gap-4 px-4 py-4">
      <!-- 空状态 -->
      <div v-if="chatMessages.length === 0" class="empty-state">
        <div class="empty-content">
          <div class="empty-icon">💬</div>
          <h3 class="empty-title">开始对话</h3>
          <p class="empty-description">输入您的问题，开始与AI助手对话</p>
        </div>
      </div>

      <!-- 聊天消息 -->
      <div v-for="chatMessage in chatMessages" :key="chatMessage.id">
        <template v-if="chatMessage.role == 'user'">
          <div class="bg-gray-100 p-2 rounded-md text-right">
            {{ chatMessage.message }}
          </div>
        </template>
        <template v-else>
          <div class="bg-blue-100 p-2 rounded-md">
            {{ chatMessage.message }}
          </div>
        </template>
      </div>
    </div>
    <div class="bottom h-[150px]">
      <div>
        <el-input v-model="message" class="w-full" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
          placeholder="Please input" />
      </div>
      <div class="px-2 pt-2 text-right">
        <el-button type="primary" @click="sendMessageClick">发送</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 300px;
}

.empty-content {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.empty-description {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}
</style>
